import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { AntDesign } from '@expo/vector-icons';
import { Feather } from '@expo/vector-icons';
import First from './pages/First';
import Home from './pages/Home';
import Shop from './pages/Shop';
import Detail from './pages/Detail';
import User from './pages/User';
import Efamily from './pages/Efamily';

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const TabBar = () => (
  <Tab.Navigator
    screenOptions={{
      headerTintColor: 'red',
      tabBarActiveTintColor: 'red',
      tabBarInactiveTintColor: '#eee',
      tabBarLabelStyle: { fontSize: 14 },
      headerTitleAlign: 'center',
      tabBarStyle: { backgroundColor: '#ccc' }
    }}
  >
    <Tab.Screen
      options={{
        headerShown: false,
        title: '首页',
        tabBarIcon: ({ color, size }) => (
          <AntDesign name='home'
            color={color}
            size={size}
          />
        )
      }}
      name='First'
      component={First}
    />
    <Tab.Screen
      options={{
        title: '商品分类',
        tabBarIcon: ({ color, size }) => (
          <Feather name="grid"
            size={size}
            color={color} />
        )
      }}
      name='Home'
      component={Home}
    />
    <Tab.Screen
      options={{
        title: '购物车',
        tabBarIcon: ({ color, size }) => (
          <AntDesign name="shoppingcart"
            size={24}
            color={color} />
        )
      }}
      name='Shop'
      component={Shop}
    />
    <Tab.Screen
      options={{
        title: '用户中心',
        tabBarIcon: ({ color, size }) => (
          <AntDesign name='user'
            color={color}
            size={size}
          />
        )
      }}
      name='User'
      component={User}
    />
  </Tab.Navigator>
)

export default function App() {

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          options={{ headerShown: false }}
          name='Root' component={TabBar} />
        <Stack.Screen name='Detail' component={Detail} />
        <Stack.Screen name='Efamily' component={Efamily}
        />
      </Stack.Navigator>

    </NavigationContainer>
  );
}
